<template>
  <div>
    <a-modal
      v-model:visible="visible"
      title="审核事件"
      :footer="null"
      width="800px"
    >
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template v-slot:bodyCell="{ column, record }">
          <template v-if="column.key === 'event_status'">
            <a-switch
              :checked="record.event_status === '1' ? true : false"
              @change="onChange(record)"
            />
          </template>
          <template v-else-if="column.key === 'action'">
            <a-popconfirm
              title="确定删除该事件?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm(record.event_id)"
              @cancel="cancel"
            >
              <a-button type="primary"> 忽略 </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script setup>
import { onUnmounted, ref, toRefs, computed, reactive } from 'vue'
import { message } from 'ant-design-vue'
import mitt from '@/mitt'
import $api from '../request/api'
/* 定义数据 */
const visible = ref(false)
const datas = ref([])
const dataSource = ref([])
const total = ref(0)
const pageData = reactive({
  page: 1,
  size: 5,
})
const body = reactive({
  id: '',
  status: '',
})
const { page, size } = toRefs(pageData)
/* 请求数据库信息 */
const queryData = () => {
  $api.getEvent(pageData).then((res) => {
    const { data, totals } = res
    dataSource.value = data
    total.value = totals
  })
}
queryData()
/* 操作按钮事件 */
const confirm = (id) => {
  console.log(id)
  // message.success('Click on Yes')
  $api.ignoreEvent(id).then((res) => {
    console.log(res)
    queryData()
  })
}
const cancel = (e) => {
  console.log(e)
  message.error('Click on No')
}
/* switch按钮事件 */
const onChange = (record) => {
  if (record.event_status === '0') {
    const statu = ref('1')
    body.id = record.event_id
    body.status = statu.value
    $api.changeEvent(body).then((res) => {
      console.log(res)
    })
    queryData()
  } else if (record.event_status === '1') {
    const statu = ref('0')
    body.id = record.event_id
    body.status = statu.value
    $api.changeEvent(body).then((res) => {
      console.log(res)
    })
    queryData()
  }
}
/* 分页器 */
const columns = [
  {
    title: '提交时间',
    dataIndex: 'event_time',
    key: 'event_time',
    width: '20%',
  },
  {
    title: '提交人',
    dataIndex: 'username',
    key: 'usename',
    width: '10%',
  },
  {
    title: '事发地点',
    dataIndex: 'event_addr',
    key: 'event_addr',
    width: '20%',
  },
  {
    title: '事发详情',
    dataIndex: 'event_describe',
    key: 'event_describe',
  },
  {
    title: '审核状态',
    dataIndex: 'event_status',
    key: 'event_status',
  },
  {
    title: '操作',
    key: 'action',
  },
]
const pagination = computed(() => ({
  total: total.value,
  defaultPageSize: size.value,
  showTotal: (total) => `共${total}条`,
  showSizeChange: true,
  pageSizeOption: ['3', '5', '10'],
}))
const handleTableChange = (pagination) => {
  page.value = pagination.current
  size.value = pagination.pageSize
  queryData()
}
/* 对话框关闭事件 */
const handleCancel = () => {
  visible.value = false
}
/* 事件总线绑定与解绑 */
const showModal = () => {
  visible.value = true
}
mitt.on('audit', showModal)
onUnmounted(() => {
  mitt.off('audit', showModal)
})
</script>
<style scoped></style>
